<template>
  <div class="">
    <ul>
      <li v-for="(ele, i) in list" :key="i" id="1">
        {{ ele }}
      </li>
    </ul>
    <button @click="update1">更新 数组中 元素数据</button>
    <hr />

    <ul>
      <li v-for="(ele, i) in list2" :key="i">
        {{ ele.name }} -- {{ ele.age }}
      </li>
    </ul>
    <button @click="update2">更新 数组中 元素数据</button>
    <hr />
    <ul>
      <li v-for="(v, k) in dog" :key="k">{{ k }} -- {{ v }}</li>
    </ul>
    <button @click="update3">更新 对象中 name属性</button>
  </div>
</template>

<script>
// 简单数据类型（值类型） 和 复杂数据类型（引用类型）
// 一、为什么 数组的 7个方法 调用时会更新 视图，而其他的数组方法不会呢？
// 数组的 7个方法 被 vue重写了！ console.log(this.list.push === [].push); --> false
// 二、关于 数组 元素更新 触发 视图重绘的 原因：
//  1.值类型数组 - vue 不检测更新，所以 不会 更新到视图中
//    解决方案： this.$set(this.list,1,'新的值')
//  2.引用类型数组 - vue 检测更新，所以 就会 更新到视图中

export default {
  name: "",
  props: {},
  data() {
    return {
      list: ["小蕊", "小白", "小黑"],
      dog: { name: "ruiky2", age: 112 },
      list2: [
        { name: "ruiky", age: 12 },
        { name: "xiaoBai", age: 22 },
        { name: "xiaoHei", age: 32 },
      ],
    };
  },
  created() {},
  methods: {
    update1() {
      this.list[1] = "小白白";
      console.log(this.list[1]);
    },
    update2() {
      this.list2[1].name = "xiaobaibai";
    },
    update3() {
      this.dog.name = "ruiky3333";
    },
  },
  computed: {},
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
</style>
